<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import wallpaperApi from "@/utils/wallpaperApi";
import {ImagePreview, Notice} from "view-ui-plus";
import SearchInput from "@/components/SearchInput";

const searchKey = ref('')
const categoryListOrigin = ref([])
const categoryList = ref([])
const wallpaperInfo = ref({})
const pageIndex = ref(1)
const currentCategory = ref({})
const loading = ref(true)
const rowCount = ref(2)

const windowWidth = ref(window.innerWidth);

if (location.protocol === 'https:') {
  Notice.open({
    title: '提示',
    duration: 0,
    render: h => {
      return h('span', {
        style: {
          lineHeight: '1.4em'
        }
      }, [
        '您现在访问的是https地址，由于浏览器限制无法请求到壁纸数据，请访问：',
        h('a', 'http://jl15988.gitee.io/simple-tools/#/toolPages/other/wallpaper')
      ])
    }
  })
}

function setRowCount() {
  if (windowWidth.value <= 600) {
    rowCount.value = 7;
  } else if (windowWidth.value <= 900) {
    rowCount.value = 6;
  } else if (windowWidth.value <= 1300) {
    rowCount.value = 3;
  } else {
    rowCount.value = 2;
  }
}

setRowCount()

function handleResize() {
  windowWidth.value = window.innerWidth;
  setRowCount()
  relCategory()
}

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

function relCategory() {
  const list = []
  const rowNum = rowCount.value;
  const columnNum = categoryListOrigin.value.length / rowNum;
  for (let i = 0; i < rowNum; i++) {
    list[i] = categoryListOrigin.value.slice(i * columnNum, i * columnNum + columnNum);
  }
  categoryList.value = list;
}

function getCategory(cb) {
  wallpaperApi.getCategoryList().then(res => {
    if (res) {
      categoryListOrigin.value = res;
      relCategory();
      currentCategory.value = res[0];
      cb && cb();
    }
  }).catch(e => loading.value = false)
}

function getWallpaper(pageNum) {
  wallpaperApi.getWallpaperList(pageNum || pageIndex.value || 1, currentCategory.value.old_id, searchKey.value).then(data => {
    wallpaperInfo.value = data;
    setTimeout(() => {
      loading.value = false;
    }, 300)
  }).catch(e => loading.value = false)
}

getCategory(() => {
  getWallpaper()
})

function search(value) {
  searchKey.value = value;
  pageIndex.value = 1;
  getWallpaper();
}

function handleType(type) {
  searchKey.value = '';
  currentCategory.value = type;
  pageIndex.value = 1;
  getWallpaper()
}

function onPageChange(page) {
  getWallpaper(page)
}

function previewImage(item, index) {
  ImagePreview.show({
    previewList: wallpaperInfo.value.list.map(i => i.url),
    initialIndex: index
  })
}

function downloadImage(item) {
  // fetch(item.url).then(res => res.blob())
  //   .then(blob => {
  //     FileUtil.downloadBlob(blob, item.tag + FileUtil.getTypeSimple(item.url));
  //   });
}

function relPageStyle() {
  const url = wallpaperInfo && wallpaperInfo.value && wallpaperInfo.value.list && wallpaperInfo.value.list.length > 0 && wallpaperInfo.value.list[0] ? wallpaperInfo.value.list[0].url : '';
  if (!url) {
    return {}
  }
  return {
    backgroundImage: 'linear-gradient(to bottom, rgba(255,255,255,0) 60%, rgba(255, 255, 255, 1) 100%), url(' + url + ')'
  }
}
</script>

<template>
  <div class="wallpaper-page">
    <!--    <div class="bg-mask"></div>-->
    <div class="bg" :style="relPageStyle()"></div>
    <div class="content page-body">
      <div class="search-box">
        <div class="search-input">
          <search-input :height="54" autofocus v-model="searchKey" @search="search"></search-input>
        </div>
      </div>
      <div class="type-list" v-for="(item, index) in categoryList" :key="index">
        <div class="type-item" v-for="(type, typeIndex) in item" :key="typeIndex" @click="handleType(type)">
          <img :src="type.icon">
        </div>
      </div>
      <div style="font-size: 18px; font-weight: bold; margin-top: 20px; margin-left: 10px">当前：
        {{ currentCategory.show_name }}
      </div>
      <Skeleton :loading="loading" animated>
        <template #template>
          <div class="wallpaper-list">
            <div class="wallpaper-item" v-for="item in 20">
              <SkeletonItem width="100%" height="270px"/>
            </div>
          </div>
        </template>
        <template #default>
          <div class="wallpaper-list">
            <div class="wallpaper-item" v-for="(item, index) in wallpaperInfo.list">
              <Image style="height: 100%; width: 100%"
                     :src="item.url"
                     fit="cover"
                     preview
                     :preview-list="wallpaperInfo.list.map(i => i.url)"
                     :initial-index="index"
                     :toolbar="['zoomIn', 'zoomOut', 'original', 'rotateLeft', 'rotateRight']"
                     :key="item.url"
                     transfer
                     lazy></Image>
              <div class="wallpaper-mask">
                <div class="top">
                  <!--                  <div class="download-wallpaper" @click="downloadImage(item, index)">-->
                  <!--                    下载-->
                  <!--                  </div>-->
                  <!--                  <div class="preview-wallpaper" @click="previewImage(item, index)">-->
                  <!--                    预览-->
                  <!--                  </div>-->
                </div>
                <div class="wallpaper-tag">{{ item.tag }}</div>
              </div>
            </div>
          </div>
        </template>
      </Skeleton>
      <div class="page-box">
        <Page class="page"
              show-elevator
              v-model="pageIndex"
              :page-size="20"
              :total="wallpaperInfo.total_count"
              @on-change="onPageChange">
        </Page>
      </div>
    </div>
    <GlobalFooter copyright="内容来源于：http://wp.birdpaper.com.cn 提供的API"/>
  </div>
</template>

<style scoped lang="scss">
@media screen and (max-width: 900px) {
  .wallpaper-page {
    .search-box {
      height: 300px !important;
      padding-top: 200px !important;
    }

    :deep(.input-box) {
      height: 44px !important;
    }

    :deep(.submit-box) {
      width: 80px !important;
    }

    .wallpaper-item {
      height: 200px !important;
    }

    .page-box {
      position: relative !important;
    }
  }
}

.wallpaper-page {
  position: relative;
  padding-bottom: 30px;
  background-size: cover;

  .bg-mask {
    position: absolute;
    top: 800px;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(10px);
  }

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 900px;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
  }

  .content {
    width: 90%;
    margin: 0 auto;
  }

  .search-box {
    height: 600px;
    display: flex;
    padding-top: 400px;
    justify-content: center;

    .search-input {
      flex: 0 1 1200px;
    }
  }

  .page-box {
    position: sticky;
    bottom: 0;
    padding: 10px;
    background-color: #ffffff;
    z-index: 99;

    ul {
      margin: 0;
    }
  }

  .page {
    margin-top: 20px;
    text-align: right;
  }

  .type-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    img {
      width: 100%;
    }

    .type-item {
      z-index: 10;
      flex: 1;
      margin: 4px;
      cursor: pointer;
    }
  }

  .wallpaper-list {
    display: flex;
    flex-wrap: wrap;

    .wallpaper-item {
      flex: 1 1 400px;
      height: 270px;
      margin: 8px;
      position: relative;
      overflow: hidden;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .wallpaper-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;

    &:hover .top {
      transform: translateY(0);
    }

    .top {
      position: absolute;
      height: 34px;
      width: 100%;
      top: 0;
      padding: 4px 0;
      box-sizing: border-box;
      background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
      transform: translateY(-34px);
      transition: all .3s;
    }

    .current-wallpaper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .4);
      text-align: center;
      line-height: 160px;
      user-select: none;
      color: #ffffff;
    }

    .download-wallpaper {
      position: absolute;
      left: 6px;
      font-size: 14px;
      color: #ffffff;
      cursor: pointer;
      user-select: none;
    }

    .preview-wallpaper {
      position: absolute;
      right: 6px;
      font-size: 14px;
      color: #ffffff;
      cursor: pointer;
      user-select: none;
    }

    .wallpaper-tag {
      height: 24px;
      position: absolute;
      width: 100%;
      bottom: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
      font-size: 14px;
      color: #fff;
      line-height: 24px;
      padding-left: 4px;
      box-sizing: border-box;
    }
  }
}
</style>
